<template>
  <div class="bgc_white" id="password_forget" :style="'min-height: '+ height">
    <el-form  :model="form" :rules="rules" ref="form"   @submit.native.prevent >
      <p class="title">{{$t('PASSWORD.FORGETPASSWORD')}}</p>
      <p>{{$t('PASSWORD.ENTEREMAIL')}}</p>
      <p class="formTitle">{{$t('DEFAULT.EMAILADDRESS')}}</p>
      <el-form-item  prop="email">
        <el-input  v-model="form.email"  ></el-input>
      </el-form-item>
      <el-button @click="submitForm()"  :loading="isRequest" :class="{'isFull': isFull}"> {{$t('PASSWORD.SENDRESETEMAIL')}}</el-button>

    </el-form>
  </div>
</template>

<script>
import { forgetPassword } from "@/api/common/password.js";
import { mapGetters } from 'vuex'
import { setHeight } from '@/utils/index.js'

export default {
  data() {
    return {
      height: "",
      form: {
        email:'',
        site:""
      }
    }
  },
  computed :{
    isFull () {
      let isFull = false
      let email = this.form.email.length > 0
      if (email){
        this.$refs.form.validate((valid) => {
          if(valid){
            isFull =  true
          } 
        })
      } 
      return isFull
    },
    ...mapGetters([ 'curSite']),
    rules() {
      return {
         email: [
          { required: true, trigger: 'blur' },
          { type: 'email', message: this.$t('DEFAULT.CORRECTEMAIL'), trigger: 'blur' }
        ],
      }
    }
  },
  mounted() {
    this.height = setHeight()
    this.form.site = this.curSite.site
  },
  methods: {
    submitForm() {
       this.$refs.form.validate((valid) => {
          if(valid){
            this.fogetPassword()
          } 
        })
    },
    fogetPassword () {
      let params = this.form
      forgetPassword(params).then(res=>{
        if(res.state ==1 ){
          this.$router.push("/forget_passoword_email")
        }
      })
    }
  }

}
</script>

<style lang="scss">
@import '@/styles/register/password.scss';

</style>